<template>
  <div class="app-container">
    <el-dialog
      v-model="dialogVisible"
      @open="onOpen"
      @close="onClose"
      title="编辑版头图"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        size="default"
        label-width="100px"
      >
        <el-form-item label="名称" prop="name">
          <el-input
            v-model="formData.name"
            placeholder="请输入名称"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="链接" prop="url">
          <el-input
            v-model="formData.url"
            placeholder="链接"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否可见" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio value="1">可见</el-radio>
            <el-radio value="0">不可见</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否联通" prop="isContent">
          <el-radio-group v-model="formData.isContent">
            <el-radio value="1">是</el-radio>
            <el-radio value="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </template>
    </el-dialog>
  </div>
  <el-dialog v-model="imgDialogVisible">
    <img class="w-full" :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>
<script setup>
import { getToken } from "@/utils/auth";
import { getSoftwareInfo } from "@/api/system/software";

const headers = ref({
  Authorization: "Bearer " + getToken(),
});

const { proxy } = getCurrentInstance();
const formRef = ref();
const proTypeOptions = ref([]);
const props = defineProps({
  currentSoftId: { type: String, default: "" },
});
const imgDialogVisible = ref(false);
const dialogImageUrl = ref("");
const data = reactive({
  formData: {
    name: "",
    url: "",
    status: "0",
    isContent: "0",
  },
  rules: {
    name: [
      {
        required: true,
        message: "请输入名称",
        trigger: "blur",
      },
    ],
    url: [
      {
        required: true,
        message: "请输入链接",
        trigger: "blur",
      },
    ],
  },
});
const { formData, rules } = toRefs(data);
// 弹窗设置
const dialogVisible = defineModel();
// 弹窗确认回调
const emit = defineEmits(["confirm"]);
/**
 * @name: 弹窗打开后执行
 * @description: 弹窗打开后执行方法
 * @return {*}
 */
function onOpen() {
  if (props.currentSoftId) {
    getList();
  }
}
//修改时初始化
function getList() {
  getSoftwareInfo({ id: props.currentSoftId }).then((response) => {
    formData.value = response.data;
  });
}
/**
 * @name: 弹窗关闭时执行
 * @description: 弹窗关闭方法，重置表单
 * @return {*}
 */
function onClose() {
  formRef.value.resetFields();
  formData.value.id = null;
}
/**
 * @name: 弹窗取消
 * @description: 弹窗取消方法
 * @return {*}
 */
function close() {
  dialogVisible.value = false;
}
/**
 * @name: 弹窗表单提交
 * @description: 弹窗表单提交方法
 * @return {*}
 */
function handelConfirm() {
  formRef.value.validate((valid) => {
    if (!valid) return;
    // TODO 提交表单
    close();
    // 回调父级组件
    emit("confirm", formData.value);
  });
}
</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}
</style>
